<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:pe="http://primefaces.org/ui/extensions">

<ui:composition template="/template.xhtml">
<ui:define name="body">
<h:form id="main">
    <p:hotkey bind="n" handler="clickButton('main:btnNew')"/>
    <p:hotkey bind="r" handler="clickButton('main:btnReset')"/>
    <p:growl id="growl" life="4000" showDetail="true" autoUpdate="true"/>
    <p:panel header="#{text['stockIn.title']}" style="width: 700px;" toggleable="true">

        <p:panelGrid columns="4" cellpadding="2" id="panelSearch">


            <f:facet name="footer" style="text-align: right">
                <p:commandButton id="btnSearch" value="#{text['common.search']}"
                                 action="#{stockInMgb.search}" ajax="true" icon="ui-icon-search"
                                 update="panelResult"/>

                <p:commandButton value="#{text['common.reset']}" update="panelSearch, panelResult"
                                 icon="ui-icon-arrowreturnthick-1-w" immediate="true"
                                 action="#{stockInMgb.reset}" process="@this" id="btnReset"/>

                <p:commandButton id="btnNew" value="#{text['common.new']}"
                                 oncomplete="rowDialog.show()" action="#{stockInMgb.add}"
                                 icon="ui-icon-circle-plus" update=":detail:display :detail:pnlDetailItem"
                        />

            </f:facet>

            <p:outputLabel value="#{text['stockIn.docNo']}"/>
            <p:inputText value="#{stockInMgb.searchDocNo}" label="id" id="searchDocNo"/>
            <p:outputLabel value="#{text['stockIn.lotNo']}"/>
            <p:inputText value="#{stockInMgb.searchLotNo}" label="name" id="searchLotNo"/>


        </p:panelGrid>

        <p:blockUI block="panelSearch" trigger="btnSearch"/>
    </p:panel>

    <p:panel id="panelResult">

        <p:dataTable var="row" value="#{stockInMgb.resultSearch}"
                     selectionMode="single" rowKey="#{row.id}" style="width: 100%"
                     selection="#{stockInMgb.selected}" id="dataResult"
                     paginator="true" rows="#{constDataTable.pageRows}"
                     paginatorTemplate="#{constDataTable.paginatorTemplate}"
                     rowsPerPageTemplate="#{constDataTable.rowsPerPageTemplate}"
                     scrollable="true" scrollHeight="#{constDataTable.scrollHeight}"
                     binding="#{stockInMgb.dtResult}"
                     paginatorPosition="bottom"
                >

            <p:column sortBy="#{row.id}">
                <f:facet name="header">
                    <h:outputText value="#{text['stockIn.id']}"/>
                </f:facet>
                <p:commandLink value="#{row.id}"
                               action="#{stockInMgb.view(row)}" oncomplete="rowDialog.show()"
                               update=":detail:display :detail:dataDetails :detail:pnlDetailItem" id="linkDetail"/>

            </p:column>

            <p:column sortBy="#{row.docNo}">
                <f:facet name="header">
                    <h:outputText value="#{text['stockIn.docNo']}"/>
                </f:facet>
                <h:outputText value="#{row.docNo}"/>
            </p:column>
            <p:column sortBy="#{row.lotNo}">
                <f:facet name="header">
                    <h:outputText value="#{text['stockIn.lotNo']}"/>
                </f:facet>
                <h:outputText value="#{row.lotNo}"/>
            </p:column>

            <p:column sortBy="#{row.docDate}">
                <f:facet name="header">
                    <h:outputText value="#{text['stockIn.docDate']}"/>
                </f:facet>
                <h:outputText value="#{row.docDate}">
                    <f:convertDateTime pattern="dd MMM yyyy" type="date"/>
                </h:outputText>
            </p:column>
            <f:facet name="footer">
                <h:outputText
                        value="#{text['common.total']}: #{fn:length(stockInMgb.resultSearch)}" id="rowCount"/>

            </f:facet>
        </p:dataTable>

    </p:panel>
    <h:commandLink id="pdf">
        <p:outputLabel value="Export"></p:outputLabel>
        <p:dataExporter type="csv" target="dataResult" fileName="ProductCategories"/>
    </h:commandLink>
</h:form>
<h:form id="detail">
    <p:dialog id="dialog" header="Receive Detail" widgetVar="rowDialog"
              resizable="true" width="85%" height="80%" showEffect="clip" hideEffect="explode"
              position="center center" closeOnEscape="true">

        <h:panelGrid id="display" columns="6" cellpadding="2">

            <p:outputLabel value="#{text['stockIn.docNo']}:" style="font-weight:bold"/>
            <p:inputText value="#{stockInMgb.selected.docNo}"
                         style="width: 150px" required="true" label="Document No."
                         id="docNo"/>
            <p:outputLabel value="#{text['stockIn.lotNo']}:" style="font-weight:bold"/>
            <p:inputText value="#{stockInMgb.selected.lotNo}"
                         style="width: 150px" required="true" label="Lot No."
                         id="lotNo"/>
            <p:selectOneMenu id="area" value="#{stockInMgb.selected.areaId}">
                <f:selectItem itemLabel="Select Area" itemValue=""/>
                <f:selectItems value="#{stockInMgb.areaList}" var="model" itemValue="#{model.id}"
                               itemLabel="#{model.name}"/>
                <p:ajax update="branch"
                        listener="#{stockInMgb.changeProdLocation}"/>
            </p:selectOneMenu>

            <p:selectOneMenu id="branch" value="#{stockInMgb.selected.branchId}">
                <f:selectItem itemLabel="Select Branch" itemValue=""/>
                <f:selectItems value="#{stockInMgb.branchList}" var="model" itemValue="#{model.id}"
                               itemLabel="#{model.name}"/>
            </p:selectOneMenu>
            <p:outputLabel value="#{text['stockIn.from']} :" style="font-weight:bold"/>
            <p:selectOneMenu value="#{stockInMgb.selected.receiveFrom}" filter="true" filterMatchMode="startsWith"
                             style="width:120px"
                             rendered="#{stockInMgb.selected!=null}">
                <f:selectItem itemLabel="Select" itemValue=""/>
                <f:selectItems value="#{stockInMgb.supplierList}" var="model" itemLabel="#{model.name}"
                               itemValue="#{model.id}"/>
            </p:selectOneMenu>

            <p:outputLabel value="#{text['stockIn.docDate']}:" style="font-weight:bold"/>
            <p:calendar value="#{stockInMgb.selected.docDate}"
                        pattern="dd MMM yyyy" id="docDate" showOn="button"/>
            <p:outputLabel value="#{text['stockIn.remark']}:" style="font-weight:bold"/>
            <p:inputText value="#{stockInMgb.selected.remark}"
                         style="width: 150px" label="Remark" id="remark"/>
            <f:facet name="footer">
                <p:commandButton id="btnSave" value="#{text['common.save']}" icon="ui-icon-check"
                                 action="#{stockInMgb.save}"
                                 oncomplete="handleDialog(xhr, status, args, rowDialog)"
                                 update=":main:growl :main:panelResult"/>
                <p:commandButton id="btnDelete" value="#{text['common.delete']}"
                                 icon="ui-icon-circle-minus"
                                 onclick="confirmation.show();return false;"
                                 oncomplete="rowDialog.hide()"
                                 rendered="#{stockInMgb.selected.id!=null}"/>
                <p:commandButton id="btnCancel" value="#{text['common.cancel']}"
                                 icon="ui-icon-cancel" oncomplete="rowDialog.hide()"
                                 process="@this">
                    <p:resetInput target=":detail:display"/>
                </p:commandButton>
            </f:facet>
        </h:panelGrid>
        <h:panelGrid columns="9" cellpadding="2" id="pnlDetailItem">
            <p:outputLabel value="#{text['stockIn.product']}:" style="font-weight:bold"/>
            <p:selectOneMenu id="prodcutItem" value="#{stockInMgb.newDetail.product.id}"
                             filter="true" filterMatchMode="contains" style="width:200px">
                <f:selectItem itemLabel="Select Product" itemValue="0"/>
                <f:selectItems value="#{stockInMgb.productList}" var="model" itemLabel="#{model.name}"
                               itemValue="#{model.id}"/>
            </p:selectOneMenu>

            <p:outputLabel value="#{text['stockIn.qty']}:" style="font-weight:bold"/>
            <pe:inputNumber id="qtyDetail" value="#{stockInMgb.newDetail.qty}">
                <p:ajax event="blur"/>
            </pe:inputNumber>


            <p:commandButton id="btnAdd" value="#{text['common.add']}"
                             icon="ui-icon-plus" action="#{stockInMgb.addDetail}"
                             update=":detail:dataDetails :detail:pnlDetailItem"/>

        </h:panelGrid>
        <p:dataTable var="row" value="#{stockInMgb.itemDetails}"
                     selectionMode="single" rowKey="#{row.id}" style="width: 400"
                     id="dataDetails"
                     paginator="true" rows="#{constDataTable.pageRows}"
                     paginatorTemplate="#{constDataTable.paginatorTemplate}"
                     rowsPerPageTemplate="#{constDataTable.rowsPerPageTemplate}"
                     scrollable="true" scrollHeight="100" editable="true" editMode="cell"
                     paginatorPosition="bottom"
                >
            <p:column width="20">
                <f:facet name="header">
                    <h:outputText value="-"/>
                </f:facet>
                <p:commandLink value="X"
                               action="#{stockInMgb.removeItem(row)}"
                               update=":detail:display :detail:dataDetails "
                               id="linkPOItem"/>
            </p:column>
            <p:column sortBy="#{row.product.id}">
                <f:facet name="header">
                    <h:outputText value="#{text['stockIn.productCode']}"/>
                </f:facet>
                <h:outputText value="#{row.product.id}"/>
            </p:column>

            <p:column sortBy="#{row.product.name}">
                <f:facet name="header">
                    <h:outputText value="#{text['stockIn.productName']}"/>
                </f:facet>
                <h:outputText value="#{row.product.name}"/>
            </p:column>

            <p:column sortBy="#{row.qty}">
                <f:facet name="header">
                    <h:outputText value="#{text['stockIn.qty']}"/>
                </f:facet>
                <p:cellEditor>
                    <f:facet name="output"><h:outputText value="#{row.qty}"/></f:facet>
                    <f:facet name="input">
                        <pe:inputNumber id="qty" value="#{row.qty}">
                            <p:ajax event="blur"/>
                        </pe:inputNumber>
                    </f:facet>
                </p:cellEditor>

            </p:column>

            <p:column sortBy="#{row.product.unit}">
                <f:facet name="header">
                    <h:outputText value="#{text['stockIn.unit']}"/>
                </f:facet>
                <h:outputText value="#{row.product.unit}"/>
            </p:column>

        </p:dataTable>

    </p:dialog>
    <p:confirmDialog id="confirmDialog"
                     message="#{text['common.confirmDelete']}" header="Confirm"
                     severity="alert" widgetVar="confirmation" appendTo="@(body)">

        <p:commandButton id="confirm" value="#{text['common.yes']}"
                         update=":main:growl :main:panelResult"
                         oncomplete="rowDialog.hide(); confirmation.hide()"
                         action="#{stockInMgb.delete}" process="@this"/>
        <p:commandButton id="decline" value="#{text['common.no']}"
                         onclick="confirmation.hide();rowDialog.hide();"/>

    </p:confirmDialog>
</h:form>
</ui:define>

</ui:composition>
</html>